<template>
  <view class="container">
     <!-- 修改后的header部分 -->
    <view class="header" :style="headerStyle">
      <view class="header-content">
        <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
        <view class="user-info">
          <text class="username">{{ username }}</text>
          <text class="user-id">ID: {{ userId }}</text>
        </view>
      </view>
    </view>
    <view class="main-content">
      <view class="option" @click="handleAddress">
        <image class="icon" :src="addressIconUrl" mode="aspectFill"></image>
        <text>我的地址</text>
      </view>
      <view class="option" @click="handleFollow">
        <image class="icon" :src="followIconUrl" mode="aspectFill"></image>
        <text>我的关注</text>
      </view>
      <view class="option" @click="handleOrder">
        <image class="icon" :src="orderIconUrl" mode="aspectFill"></image>
        <text>我的订单</text>
      </view>
    </view>
    <button class="logout-button" @click="handleLogout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '/static/assets/user.png', // 默认头像
      username: '', // 默认用户名
      userId: '', // 默认用户ID
      addressIconUrl: '/static/地址.png', 
      followIconUrl: '/static/关注.png', 
      orderIconUrl: '/static/_订单.png', 
      // 新增窗口宽度数据
      windowWidth: 375, // 默认值
    };
  },
  onShow() {
    // 每次页面显示时都重新加载用户信息
    this.loadUserInfo();
  },
  computed: {
    // 计算header的背景样式
    headerStyle() {
      const colors = ['#0099ff', '#66ccff', '#3399ff', '#00ccff'];
      // 根据窗口宽度选择颜色
      const colorIndex = Math.min(
        Math.floor(this.windowWidth / 100), 
        colors.length - 1
      );
      return {
        background: `linear-gradient(to right, ${colors[colorIndex]}, ${colors[colorIndex + 1] || colors[0]})`
      };
    }
  },
  onLoad() {
    // 获取窗口宽度
    this.getWindowSize();
    // 监听窗口变化
    uni.onWindowResize(() => {
      this.getWindowSize();
    });
  },
  methods: {
    getWindowSize() {
      const res = uni.getSystemInfoSync();
      this.windowWidth = res.windowWidth;
    },
    loadUserInfo() {
      try {
        // 从本地存储获取用户信息
        const userInfo = uni.getStorageSync('userInfo');
        
        if (userInfo) {
          // 动态设置用户信息
          this.avatarUrl = userInfo.avatar || '/static/assets/user.png';
          this.username = userInfo.username || userInfo.name || '新用户';
          
          // 优先使用userId，如果没有则使用id或其他标识
          this.userId = userInfo.userId || userInfo.id || '未设置ID';
          
          console.log('用户信息加载成功:', {
            avatar: this.avatarUrl,
            username: this.username,
            userId: this.userId
          });
        } else {
          console.warn('未找到用户信息，用户可能未登录');
          // 可以在这里跳转到登录页面
          // uni.redirectTo({ url: '/pages/login/login' });
        }
      } catch (error) {
        console.error('加载用户信息失败:', error);
        uni.showToast({
          title: '加载用户信息失败',
          icon: 'none'
        });
      }
    },
    handleAddress() {
      // 跳转到我的地址页面逻辑，例如 uni.navigateTo({ url: '/pages/addressEdit/addressEdit' })
      uni.navigateTo({ url: '/pages/addressEdit/addressEdit' })
      console.log('进入我的地址页面');
    },
    handleFollow() {
      // 跳转到我的关注页面逻辑，例如 uni.navigateTo({ url: '/pages/morestores/index' })
      uni.navigateTo({ url: '/pages/morestores/index' })
      console.log('进入我的关注页面');
    },
    handleOrder() {
      // 跳转到我的订单页面逻辑，例如 uni.navigateTo({ url: '/pages/order/order' })
      uni.switchTab({ url: '/pages/order/index' })
      console.log('进入我的订单页面');
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: res => {
          if (res.confirm) {
            // 执行退出登录操作，如清除token等
            // 这里假设清除登录状态相关数据（如果有存储token等）
            uni.removeStorageSync('token'); 
            uni.removeStorageSync('userInfo'); 
            // 跳转到登录页面
            uni.redirectTo({ url: '/pages/login/login' }); 
            console.log('退出登录成功');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f4f4f4;
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

/* 修改后的样式 */
.header {
  width: 100%;
  height: 250px;
  padding: 20rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease; /* 添加颜色过渡效果 */
  background-color: #0099ff;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.avatar {
  width: 170rpx;
  height: 170rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  width: 80%;
  text-align: center;
}

.username {
  font-size: 36rpx;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: #999;
}

.main-content {
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.logout-button {
  background-color: #0099ff;
  color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
}
</style>